﻿
<script lang="ts" setup>
    import { reactive, ref } from 'vue'
    import { addNewUserService } from '@/api/user.js'; //导入自定义函数
    


    //const dialogTableVisible = ref(false)
    const dialogFormVisible = ref(false)
    const formLabelWidth = '140px'

    const newUserForm = reactive({
        uname: '',
        gender: '',
    });

    const genderOptions = ref(['男', '女']);


    const cancelNewUser = function () {
        dialogFormVisible.value = false;
    }
    const submitNewUser = async function () {
        if (newUserForm.uname === "" || newUserForm.gender === "" || newUserForm.uname === undefined || newUserForm.gender === undefined) {
            alert("请填写信息");
        } else {
            let result = await addNewUserService(newUserForm);
            if (result.code === 200 || result.code === "200") {
                dialogFormVisible.value = false;
            } else {
                alert(result.message);
            }
        }
    }
</script>


<template>
    <!--   <el-button plain @click="dialogTableVisible = true">
           Open a Table nested Dialog
       </el-button>-->

    <el-button plain @click="dialogFormVisible = true" type="primary">
        新增用户信息
    </el-button>

    <!--    <el-dialog v-model="dialogTableVisible" title="Shipping address" width="800">
            <el-table :data="gridData">
                <el-table-column property="date" label="Date" width="150" />
                <el-table-column property="name" label="Name" width="200" />
                <el-table-column property="address" label="Address" />
            </el-table>
        </el-dialog>-->

    <el-dialog v-model="dialogFormVisible" title="新增用户信息" width="500">
        <el-form :model="newUserForm">
            <el-form-item label="用户名" :label-width="formLabelWidth">
                <el-input v-model="newUserForm.uname" autocomplete="off" placeholder="请输入用户信息" />
            </el-form-item>
            <el-form-item label="性别" :label-width="formLabelWidth">
                <el-select v-model="newUserForm.gender" placeholder="请选择性别">
                    <el-option v-for="gender in genderOptions" :label="gender" :value="gender" :key="gender" />
                </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="cancelNewUser">Cancel</el-button>
                <el-button type="primary" @click="submitNewUser">
                    Confirm
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>
